<!-- 失物招领 -->
<template>
  <div class="lostFound">
    <myheader title="失物招领" rightBtn="添加物品" @updataInfo="submitRecruit"></myheader>
    <!-- 搜索栏 -->
    <div class="serarch">
      <van-search v-model="searchValue" show-action placeholder="请输入搜索关键词" @search="onSearch" />
    </div>
    <ul v-if="!empty">
      <lsotFond
        @getLost="handelChange"
        :pageSize="pageSize"
        :total="total"
        :lostFound="lostFound"
        :currentPage="currentPage"
        :pageCount="pageCount"
      ></lsotFond>
    </ul>
    <van-empty v-else image="error" description="暂无此内容！" />
  </div>
</template>

<script>
import myheader from '../../../comon/myheader.vue'
import lsotFond from '../../../comon/lostFond.vue'

export default {
  components: {
    myheader,
    lsotFond,
  },
  data() {
    return {
      lostFound: [],
      currentPage: 1,
      pageSize: 6,
      pageCount: 2,
      total: 1,
      empty: false,
      searchValue: '',
    }
  },

  created() {
    this.init()
  },
  methods: {
    async init() {
      const res = await this.$axios.get(
        '/item/lost/list?current=' + this.currentPage + '&size=' + this.pageSize
      )
      if (res.data.code == 200) {
        this.lostFound = res.data.data.records
        this.total = res.data.data.total
        this.pageCount = res.data.data.pages
      }
    },
    // 搜索
    async onSearch() {
      const res = await this.$axios.get(
        '/item/lost/list?title=' + this.searchValue
      )
      if (res.data.code == 200) {
        this.lostFound = res.data.data.records
        this.total = res.data.data.total
        this.pageCount = res.data.data.pages
        this.searchValue = ''
        if (res.data.data.total == 0) {
          this.empty = true
        } else {
          this.empty = false
        }
      }
    },
    // 添加遗失物品
    submitRecruit() {
      this.$router.push('/addLostFound')
    },

    // 分页
    handelChange(currentPage) {
      this.currentPage = currentPage
      this.init()
    },
  },
}
</script>

<style scoped>
.serarch {
  margin-top: 46px;
}
p {
  padding: 0 !important;
}
</style>
